.loading-12,
.loading-13 {
  width: 64rpx;
  height: 64rpx;
  position: relative;

  .block {
    width: 4rpx;
    height: 20rpx;
    margin-top: -10rpx;
    margin-left: -2rpx;
    position: absolute;
    animation: line-spin-clockwise-fade 1s infinite ease-in-out;
    background: var(--color);

    &:nth-child(1) {
      top: 15%;
      left: 50%;
      transform: rotate(0deg);
      animation-delay: -0.875s;
    }
    &:nth-child(2) {
      top: 25.2512626585%;
      left: 74.7487373415%;
      transform: rotate(45deg);
      animation-delay: -0.75s;
    }
    &:nth-child(3) {
      top: 50%;
      left: 85%;
      transform: rotate(90deg);
      animation-delay: -0.625s;
    }
    &:nth-child(4) {
      top: 74.7487373415%;
      left: 74.7487373415%;
      transform: rotate(135deg);
      animation-delay: -0.5s;
    }
    &:nth-child(5) {
      top: 84.9999999974%;
      left: 50.0000000004%;
      transform: rotate(180deg);
      animation-delay: -0.375s;
    }
    &:nth-child(6) {
      top: 74.7487369862%;
      left: 25.2512627193%;
      transform: rotate(225deg);
      animation-delay: -0.25s;
    }
    &:nth-child(7) {
      top: 49.9999806189%;
      left: 15.0000039834%;
      transform: rotate(270deg);
      animation-delay: -0.125s;
    }
    &:nth-child(8) {
      top: 25.2506949798%;
      left: 25.2513989292%;
      transform: rotate(315deg);
      animation-delay: 0s;
    }
  }
}

.loading-13 {
  animation: line-spin-clockwise-fade-rotating-rotate 6s infinite linear;
}

@keyframes line-spin-clockwise-fade {
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes line-spin-clockwise-fade-rotating-rotate {
  100% {
    transform: rotate(-360deg);
  }
}
